연산 결과 또는 사용자의 작업 결과를 나타낸다.
구문 콘텐츠(phrasing-content)가 예상되는 위치
[Exposed=Window]
interface HTMLOutputElement : HTMLElement {
[HTMLConstructor] constructor();
[SameObject, PutForwards=value] readonly attribute DOMTokenList htmlFor;
readonly attribute HTMLFormElement? form;
[CEReactions] attribute DOMString name;
readonly attribute DOMString type;
[CEReactions] attribute DOMString defaultValue;
[CEReactions] attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
boolean reportValidity();
undefined setCustomValidity(DOMString error);
readonly attribute NodeList labels;
};
일반 요소에 결과를 출력하는 것과 차별점을 갖지 못하는 것 처럼 보이지만 <output>
요소는 양식(form) 요소이며 name
애트리뷰트와 value
IDL
(Interface Description Language) 속성을 포함한다.
다음은 값을 표시하는 데 일반 요소와 차이점을 설명한다.
const elDiv = document.querySelector("div.output");
const elOutput = document.querySelector("output");
elDiv.textContent = "what value";
elOutput.value = "what value";
<output></output>
결과에 영향을 주었던 값을 갖는 요소의 id
를 순서와 관계없이 공백으로 구분된 목록으로 지정한다. 영향을 준 요소와 명시적 관계임을 의미하지만 출력에 어떠한 영향을 주지는 않는다.
순서가 없는 공백으로 구분된 고유한 토큰 세트를 나타낸다.
<form>
요소와 연결할 때 연결하고자 하는 <form>
요소의 id
를 지정한다.
문서에서 요소를 식별하는 유일무이한 문자열 값을 나타낸다.
요소의 이름을 지정한다. 유저 에이전트(user agent)에서 식별값으로 사용되며 입력 요소에 지정된 name
의 값은 서버에 전송시 데이터를 식별하는 이름으로 사용된다. 식별값으로 사용되지만 유일무이한 값으로 강제하지는 않는다. 그러한 이유는 <input type="checkbox">
요소를 통해 이해할 수 있다. 체크박스 입력 방식은 준비된 동일한 이름의 데이터에서 다른 값을 선택하는 식이다. 따라서 값은 달라도 데이터의 이름은 동일할 수 있다.
<form>
요소에서 name
애트리뷰트가 HTML5에서 폐기되었다. 대신에 id
애트리뷰트를 식별값으로 사용한다.비워있지 않는 문자열을 나타낸다.
일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.
일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.